<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>湖南卓景京信息技术有限公司官网</title>
    <meta name="keywords" content="${keyword}"  >
    <meta name="description" content="${description }" />
    
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${path }/resource/css/visitor/base.css" rel="stylesheet" type="text/css">
    <link href="${path }/resource/css/visitor/index.css" rel="stylesheet" type="text/css">
    <link href="${path }/resource/css/styleOne/animate.min.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="${path }/resource/images/favicon.ico">
	<style type="text/css">
	.develop {
		position: relative;
	}
	.develop img {
		width: 100%;
	}
	.develop h3 {
		position: absolute;
		top: 10%;
		left: 50%;
		margin-left: -120px;
		z-index:10;
	}
	.develop h3 span {
		display: inline-block;
		width: 60px;
		height: 60px;
		line-height: 60px;
	}
</style>
</head>
<body class="">

<jsp:include page="_top.jsp"></jsp:include>
<div class="warp-box">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        
         <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
        <c:forEach items="${lbt }" var="item" varStatus="count" > 
        	<c:if test="${count.index eq 0 }">
        		<li data-target="#myCarousel" data-slide-to="${count.index }"class="active"></li>
        	</c:if>
        	<c:if test="${count.index ne 0 }">
             	<li data-target="#myCarousel" data-slide-to="${count.index }" class=""></li>
             </c:if>
           </c:forEach>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
           <c:forEach items="${lbt }" var="item" varStatus="count" > 
           <c:if test="${count.index eq 0 }">
        		 <div class="item active"><img src="${item.adImg }" ></div>
        	</c:if>
        	<c:if test="${count.index ne 0 }">
             	 <div class="item"><img src="${item.adImg }" ></div>
             </c:if>
           </c:forEach>
        </div>
        <!-- 轮播（Carousel）指标
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class=""></li>
            <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
        </ol> -->
        <!-- 轮播（Carousel）项目 
        <div class="carousel-inner">
            <div class="item">
                <img src="${path}/resource/images/banner01.jpg" alt="First slide">
            </div>
            <div class="item active">
                <img src="${path}/resource/images/banner02.jpg" alt="Second slide">
            </div>
        </div>-->
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> </a>
    </div>
    <div class="server">
        <div class="tit">
            <h3 class="text-center tit1">OUR SERVICES</h3>
            <h3 class="text-center tit2"><span class="line"></span>服务范围<span class="line2"></span></h3>
        </div>
        <div class="row " id="ff1">
            <div class="server-list">
                <a href="javascript:void(0)" class="server-link server-link1">
                   <span class="server-icon server-icon1"></span>
                   <span>行业解决方案</span>
                </a>
            </div>
            <div class="server-list">
                <a href="javascript:void(0)" class="server-link  server-link2">
                    <span class="server-icon server-icon2"></span>
                    <span>移动互联网解决方案</span>
                </a>
            </div>
            <div class="server-list">
                <a href="javascript:void(0)" class="server-link  server-link3">
                    <span class="server-icon server-icon3"></span>
                    <span>AR增强实现</span>
                </a>
            </div>
            <div class="server-list">
                <a href="javascript:void(0)" class="server-link server-link4">
                    <span class="server-icon server-icon4"></span>
                    <span>游戏开发</span>
                </a>
            </div>
            <div class="server-list">
                <a href="javascript:void(0)" class="server-link server-link5">
                    <span class="server-icon server-icon5"></span>
                    <span>人才孵化</span>
                </a>
            </div>

        </div>
    </div>
    <div class="cultrue "  >
        <h3 class="text-center">
            <span class="black-bg">企</span><span  class="yellow-bg">业</span><span class="black-bg">简</span><span  class="yellow-bg">介</span>
        </h3>
        <div class="cultrue-con " id="ff2">
            <div class="cultrue-info">
                <img  src="${qyjj.adImg }" alt="">
                <div class="cultrue-txt">
                    <p>${qyjj.adTitle}</p>
                    <a href="${path }/visitor/aboutus">查看更多&gt;&gt;</a>
                </div>

            </div>
            <ul class="small-pic">
	             <c:forEach items="${syhdzp }" var="item" varStatus="count" > 
	          			 <li><img src="${item.adImg }" alt=""></li>	          			 
	           </c:forEach>
            </ul>
        </div>
    </div>
    <div class="product ff" >
        <div class="tit">
            <h3 class="text-center tit1">CASES</h3>
            <h3 class="text-center tit2"><span class="line"></span>产品案例<span class="line2"></span></h3>
        </div>
        <ul class="product-slider" >
            <li><a href="${path }/visitor/productCase">企业级开发</a></li>
            <li><a href="${path }/visitor/productCase">移动应用</a></li>
            <li><a href="${path }/visitor/productCase">棋牌游戏</a></li>
            <li><a href="${path }/visitor/productCase">AR/VR应用</a></li>
            <li><a href="${path }/visitor/productCase">人才孵化</a></li>
        </ul>
        <div id="ff3" class="pictureSlider poster-main" data-setting='{"width":1100,"height":420,"posterWidth":600,"posterHeight":420,"scale":0.7,"autoPlay":true,"delay":2000,"speed":300}'>
            <div class="poster-btn poster-prev-btn glyphicon glyphicon-chevron-left"></div>
            <ul class="poster-list">
             <c:forEach items="${cpallb }" var="item" varStatus="count" > 
            	 <li class="poster-item"><a href="#"><img src="${item.adImg }"></a></li>
	           </c:forEach>
            </ul>
            <div class="poster-btn poster-next-btn glyphicon glyphicon-chevron-right"></div>
        </div>
        <div class="text-center view-more"><a href="${path }/visitor/productCase">more<sup>+</sup></a></div>
    </div>
    <div class="develop">
        <h3 class="text-center">
            <span class="black-bg">发</span><span  class="yellow-bg">展</span><span class="black-bg">历</span><span  class="yellow-bg">程</span>
        </h3>
        <img  id="ff6"  class="bg" src="${path}/resource/images/develop.png" alt="">
    </div>
    <div class="news" >
        <div class="tit">
            <h3 class="text-center tit1">NEWS</h3>
            <h3 class="text-center tit2"><span class="line"></span>企业新闻<span class="line2"></span></h3>
        </div>
			<div class="container">
				<div class="news-con row" id="ff4">
					<ul class="news-pic col-md-6">
						<li><img src="${syxwdt.adImg }"></li>
						<li class="txt">
							<div class="data">
								<strong><fmt:formatDate value="${syxwdt.adTime}"
										pattern="dd" /></strong><br> <span><fmt:formatDate
										value="${syxwdt.adTime}" pattern="MM" /></span>
							</div>
							<div class="txt-con"><p><a href="${syxwdt.adUrl }">${syxwdt.adTitle }</a></p></div>
						</li>
					</ul>
					<span class="clear"></span>
					<ul class="news-list col-md-5">
						<c:forEach items="${qyxw }" var="item" varStatus="count">
							<li>
								<div class="data">
									<strong><fmt:formatDate value="${item.adTime}"
											pattern="dd" /></strong><br> <span><fmt:formatDate
											value="${item.adTime}" pattern="MM" /></span>
								</div>
								<p><a href="${item.adUrl }">${item.adTitle }</a></p>
							</li>
						</c:forEach>

					</ul>
				</div>
			</div>
			<div class="text-center view-more"><a href="${path }/visitor/news">more<sup>+</sup></a></div>
    </div>
    <div class="parteners" >
        <div class="tit">
            <h3 class="text-center tit1">PARTENERS</h3>
            <h3 class="text-center tit2"><span class="line"></span>合作伙伴<span class="line2"></span></h3>
        </div>
			<div class="container">
				<ul class="companies row" id="ff5">
					<c:forEach items="${hzhb }" var="item" varStatus="count">
						<li class="col-md-3 col-xs-4"><div>
								<img src="${item.adImg }" alt="">
							</div></li>
					</c:forEach>
				</ul>
			</div>
		</div>
</div>
<jsp:include page="_foot.jsp"></jsp:include>
<script type="text/javascript" src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript" src="${path }/resource/js/systools/MTools.js"></script>
<script type="text/javascript" src="${path }/resource/js/plugin/carousel.js"></script>
<script>
    $(function(){
        Carousel.init($(".pictureSlider"));
        console.log($("body").find(".ff").length)
    });
    
    
    
    window.onscroll =function(){
    	
    	var ids=["ff1","ff2","ff3","ff4","ff5","ff6"];
    	for(var i=0;i<ids.length;i++){
    		
    		var top = document.getElementById(ids[i]).getBoundingClientRect().top;
            var se = document.documentElement.clientHeight;
              //浏览器可见区域高度。
             if(top <= se ) {
            	 if(!$("#"+ids[i]).hasClass("animated")){
            		 $("#"+ids[i]).addClass('animated fadeInUpBig');
            	 }
            	 
             }
    	}
    }
    $('.carousel').carousel({
    	  interval: 2500
    	})
</script>
</body>
</html>
